<template>
	<view>
		<view class="top">
			<u-search shape="round" bg-color="#2a2b3e" border-color="darkgray" height="70rpx" :actionStyle="{color:'white'}"></u-search>
			<view class="top_inner" @click="navTo('/pages/contacts/contacts')">
				<image src="../../static/contacts/contacts.png" ></image>
				<text>通讯录</text>
			</view>
		</view>
		<view class="middle" @click="navTo('/pages/contacts/newFridends')">
<text>
	新朋友
</text>
<uni-icons type="right" size="20" color="white"></uni-icons>

		</view>
		
		<!-- <view v-for="(item,index) in messageList"> -->
			<uni-list-chat title="uni-app"
			avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" 
			note="您收到一条新的消息" 
			time="2020-02-02 20:20" 
			badge-positon="right" 
			badge-text="99"
			@click="navTo('/pages/contacts/message')"
			link
			></uni-list-chat>
		<!-- </view> -->


	
	</view>
</template>

<script>
import { getMessageList } from '../../api/contacts';
	export default {
		data() {
			return {
				messageList:[]
			};
		},
		onLoad() {
			getMessageList().then(res=>{
				if(res.code===200){
					this.messageList=res.rows
					
				}else{
					uni.showToast({
						title: '请求错误',
						duration: 2000
					});

				}
			})
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	
	/deep/.uni-list-item__container{
		background-color: $bg-color;
	}
	
	/deep/.uni-list-chat{
		background-color: $bg-color;
	}
	
	/deep/.uni-list-chat__container{
		padding: 0;
	}
	
	/deep/.uni-list-chat__header{
		border: none;
	}
	
	/deep/.uni-list-chat__content-title{
		color: white;
	}
	
	page{
		background-color: $bg-color;
		padding: 20upx 30upx;
	}
	
	.top{

		width:94%;
		display: flex;
		margin-bottom: 20upx;
		
		.top_inner{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 40upx; 
				height: 40upx;
			}
			
			text{
				color: white;
				font-size: $font-base - 5upx;
			}
		}
		

	}
	
	.middle{
		width:94%;

		padding: 30upx 0;
		display: flex;
		justify-content: space-between;
		
		text{
			color: white;
		}
	}

</style>
